.chinesechess-chessboard {
  .status-circle {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    border-radius: 100%;
    border: 2px solid;
    opacity: 0;
    transform: var(--pos-transform);
    transition: opacity 0.1s ease-out;
    animation-play-state: paused;
    z-index: 3;
    box-sizing: border-box;
    pointer-events: none;

    &.show {
      display: block;
      opacity: 1;
    }

    &.play {
      animation: animation-status-circle 2s linear infinite;
      animation-play-state: running;
    }

    &.danger {
      border-color: rgb(248, 0, 0, 1);
      box-shadow:
        inset 0px 0px 3px 3px rgba(255, 0, 0, 0.25),
        0px 0px 3px 3px rgb(255, 0, 0, 0.25);
    }

    &.eatable {
      border-color: rgb(0, 190, 0, 1);
      box-shadow:
        inset 0px 0px 3px 3px rgb(0, 210, 0, 0.25),
        0px 0px 3px 3px rgb(0, 210, 0, 0.25);
    }
  }
  &.xs-screen {
    .status-circle {
      border-width: 1.5px;
    }
  }

  @keyframes animation-status-circle {
    0% {
      transform: var(--pos-transform) scale(1);
    }
    50% {
      transform: var(--pos-transform)scale(1.2);
    }
    100% {
      transform: var(--pos-transform) scale(1);
    }
  }
}
